<template>
  <!-- 电压/电流曲线数据 弹窗 -->
  <a-modal
    v-model:open="visible"
    title="电压/电流曲线数据"
    @ok="handleOk"
    destroyOnClose
    :width="1000"
    @cancel="cancel"
    centered
  >
    <a-table
      :dataSource="tableData"
      :columns="columns"
      size="small"
      :scroll="{ x: 'max-content' }"
      @resizeColumn="handleResizeColumn"
      :loading="tableLoading"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === '1'">
          <span v-param="record.pdId1">{{ record[column.key] }}</span>
        </template>
        <template v-if="column.key === '2'">
          <span v-param="record.pdId2">{{ record[column.key] }}</span>
        </template>
        <template v-if="column.key === '3'">
          <span v-param="record.pdId3">{{ record[column.key] }}</span>
        </template>
      </template>
    </a-table>
    <template #footer>
      <div class="footerBar">
        <a-button v-hasPermission="'monitorVoltageCurrentExportData'" class="yellowBtn" @click="handleExport" :loading="loading"
          >导出</a-button
        >
        <a-button key="submit" type="primary" @click="cancel">关闭</a-button>
      </div>
    </template>
  </a-modal>
</template>
<script setup>
// 
import utilsExportFile from "@/utils/exportFile"
import { transformExportData } from "@/utils/common"
const $api = inject("$api")
const props = defineProps({
  detailsDataVisible: {
    type: Boolean,
    default: false,
  },
  chartsTableData: {
    type: Object,
  },
})
const visible = ref(props.detailsDataVisible)
const emits = defineEmits(["update:detailsDataVisible", "getParamCodePage"])
watch(
  () => props.detailsDataVisible,
  (val) => {
    visible.value = val
    if (val) {
      initTableData()
    }
  }
)
const labelCol = { style: { width: "130px" } }
const tableData = ref([])
const columns = ref([
  {
    title: "数据来源",
    dataIndex: "name",
    key: "name",
    width: 150,
    resizable: true,
    align: "center",
  },
  {
    title: "时间",
    dataIndex: "dateTime",
    key: "dateTime",
    width: 120,
    resizable: true,
    align: "center",
  },
  {
    title: "AB线电压",
    dataIndex: "1",
    key: "1",
    width: 120,
    resizable: true,
    align: "center",
    customCell: (record, rowIndex, column) =>
      getCustomCellColour(record, rowIndex, column),
  },
  {
    title: "BC线电压",
    dataIndex: "2",
    key: "2",
    width: 120,
    resizable: true,
    align: "center",
    customCell: (record, rowIndex, column) =>
      getCustomCellColour(record, rowIndex, column),
  },
  {
    title: "CA线电压",
    dataIndex: "3",
    key: "3",
    width: 120,
    resizable: true,
    align: "center",
    customCell: (record, rowIndex, column) =>
      getCustomCellColour(record, rowIndex, column),
  },
])
const getCustomCellColour = (record, rowIndex, column) => {
  const { isBuild1, isBuild2, isBuild3, isBuild4 } = record

  switch (column.dataIndex) {
    case "1":
      if (isBuild1) {
        console.log("[ record ]1")
        return {
          style: {
            background: `rgba(244, 63, 94, 0.2)`,
          },
        }
      }
      break
    case "2":
      if (isBuild2) {
        console.log("[ record ]2")
        return {
          style: {
            background: `rgba(244, 63, 94, 0.2)`,
          },
        }
      }
      break
    case "3":
      if (isBuild3) {
        console.log("[ record ]3")
        return {
          style: {
            background: `rgba(244, 63, 94, 0.2)`,
          },
        }
      }
      break
  }
}
const exportData = ref([])
const initTableData = () => {
  // 初始化一个空数组用于存储最终结果
  const newlineData = []
  // 使用一个对象来跟踪站点和日期的组合
  const resultMap = {}
  const chartsTableData = props.chartsTableData.flat()
  console.log("[ chartsTableData ]-119", chartsTableData)
  for (const item of chartsTableData) {
    item.lineData = item.lineData.map((lineItem) => {
      return {
        ...lineItem,
        pdId: item.pdId, // 将pdId添加到lineData每个对象
      }
    })
  }
  console.log("[ chartsTableData ]-129", chartsTableData)
  chartsTableData.forEach((item) => {
    const { linkName, lineType, lineData } = item
    lineData.forEach((line) => {
      const { dateTime, value, pdId, isBuild } = line
      const key = `${linkName}-${dateTime}` // 创建唯一标识符
      // 如果这个组合尚未在 resultMap 中存在
      if (!resultMap[key]) {
        resultMap[key] = {
          name: linkName,
          dateTime,
        }
        newlineData.push(resultMap[key]) // 添加到 newlineData 数组中
      }
      // 根据 lineType 设置相应的值
      resultMap[key][lineType] = value
      resultMap[key][`pdId${lineType}`] = pdId
      resultMap[key][`isBuild${lineType}`] = isBuild
    })
  })
  tableData.value = newlineData
  // 以下处理导出数据
  exportData.value = {
    title: columns.value.map((item) => item.title),
    list: transformExportData(
      tableData.value,
      columns.value.map((item) => item.key)
    ),
  }
}
const cancel = () => {
  emits("update:detailsDataVisible", false)
}
const tableLoading = ref(false)
const loading = ref(false)
const handleExport = async () => {
  loading.value = true
  const res = await $api.exportCommon(exportData.value)
  loading.value = false
  utilsExportFile.exportFile(res, `${"电压/电流曲线数据"}.xlsx`)
}
</script>

<style lang="less" scoped>
.ant-table {
  .ant-btn {
    padding: 4px 5px;
  }
}
.footerBar {
  text-align: center;
  margin-top: 30px;
}
</style>
